@import "../scss/variables.scss";
@import "../scss/mixins";
@import "~react-day-picker/lib/style.css";

.toolbar {
  float: right;
  margin-bottom: 15px;
}

.form { // This is here to give the styles below higher priority than Bootstrap has
  :global .DayPicker {
    border: $input-border-width solid $input-border-color;
    border-radius: $input-border-radius;
    padding: $input-padding-y $input-padding-x;
  }

  :global .form-horizontal .control-label {
    display: block;
  }

  :global .form-control[disabled] {
    cursor: default;
    background-color: #eeeeee;
    opacity: 1;
  }

  :global .ace_editor {
    border: 1px solid #ccc;
  }

  .buttonRow:last-child {
    // This is to move Save/Delete buttons a bit down
    margin-top: 15px;
  }
}

.staticFormGroup {
  margin-bottom: 15px;
}

.dayPickerWrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-end;
}

.buttonRow {
}

.buttonRow > * {
  margin-right: 15px;
}

.buttonRow > *:last-child {
  margin-right: 0px;
}

.formDisabled {
  background-color: #eeeeee;
  opacity: 1;
}

.formStatus {
  padding-top: 5px;
  padding-bottom: 5px;
}

.dataTableTable {
  overflow-x: auto;
}

.actionLinks > * {
  margin-right: 8px;
}

.actionLinks > *:last-child {
  margin-right: 0px;
}

.tableSelectDropdown {
  margin-bottom: 15px;
}

.tableSelectTable.tableSelectTableHidden {
  display: none;
  height: 0px;
  margin-top: -15px;
}

.tableSelectDropdown input[readonly] {
  background-color: white;
}

:global h3.legend {
  font-size: 21px;
  margin-bottom: 20px;
}

.tertiaryNav {
  justify-content: flex-end;
  flex-grow: 1;
  align-self: center;

  margin-left: 5px;
  margin-right: 5px;

  :global .nav-item .nav-link {
    padding: 3px 10px;
  }
}

.inputContainer {
  position: relative;

  .inputHints {
    position: absolute;
    border-top: 0;
    width: 100%;
    top: 100%;
    z-index: 100;
  }

  .inputHint {
    padding: 0.5rem;
  }

}

.columnSelectWrapper {
  display: flex;
  flex-flow: column nowrap;
  text-align: center;
}

.columnScroller{
  cursor: pointer;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */

  &:hover {
    //border: 1px dashed var(--gray);
    box-shadow:0 0 1px 1px var(--gray);
  }
}

.columnSelectHeader {
  color: var(--gray);
  text-align: center;
}

.columnSelect {
  list-style-type: none;
  overflow: hidden;
  padding:0;
  height: 20em;
  margin: 0;

  @include hocus(){
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */

    &::-webkit-scrollbar { /* WebKit */
      width: 0;
      height: 0;
    }
  }
}

.columnSelectItem {
  padding: 0 20px;
  cursor: pointer;

  &.columnSelectItemSelected {
    background-color: #4A90E2;
    color:white;
    @include hocus() {
      background-color:#51A0FA;
    }
  }

  @include hocus(){
    background-color: #F0F8FF;
  }
}

.TimePicker {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  border: $input-border-width solid $input-border-color;
  border-radius: $input-border-radius;
  padding: $input-padding-y $input-padding-x;
}

.colorPickerSwatchWrapper {
  padding: 7px;
  background: #fff;
  border: 1px solid #AAB2BD;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;

  .colorPickerSwatchColor {
    width: 60px;
    height: 18px;
    border-radius: 2px;
  }
}

.colorPickerWrapper {
  text-align: right;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1000;
  cursor: pointer;
}

.dialog {
  z-index: 1001;
  position: relative;
}

.checkboxText {
  padding-top: 3px;
}

.dropZone{
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 3px;
  margin-top: 3px;
  border: 2px solid #E6E9ED;
  border-radius: 5px;
  background-color: #FAFAD2;
  text-align: center;
  font-size: 20px;
  color: #808080;

  p:last-child {
    margin-bottom: 0px;
  }
}

.dropZoneActive {
  border-color: #90EE90;
  color: #000;
  background-color: #DDFFDD;
}


.untrustedContent {
  border: 0px none;
  width: 100%;
  overflow: hidden;
}

.withElementInFullscreen {
  height: 0px;
  overflow: hidden;
}

.iconDisabled {
  color: $link-color;
  text-decoration: $link-decoration;
}

.errorsList {
  margin-bottom: 0px;
}


:global .modal-dialog {
  @media (min-width: 768px) {
    max-width: 700px;
  }

  @media (min-width: 1000px) {
    max-width: 900px;
  }
}

